<!--微信账号-->
<template>
  <div class="app-container">
    <div style="border-radius: 10px; background-color: #FFFFFF; padding: 20px; border: 1px solid #EEEEEE;">
    <h1>总计报表</h1>
    <el-table v-loading="loading" :data="totalDataReport">
      <el-table-column
        label="总手数"
        align="center"
        prop="totalHands"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="总保险"
        align="center"
        prop="totalInsurancePool"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="总活跃度积分"
        align="center"
        prop="totalActivityPoints"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="总战绩"
        align="center"
        prop="totalScore"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="总JP贡献值"
        align="center"
        prop="totalJpContribution"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="总带入"
        align="center"
        prop="totalBuyIn"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="总战绩流水"
        align="center"
        prop="totalScoreDetails"
        :show-overflow-tooltip="true"
      />
    </el-table>
    </div>

    <div style="border-radius: 10px; background-color: #FFFFFF; padding: 20px; border: 1px solid #EEEEEE; margin-top: 40px;">
    <h1>筛选报表</h1>
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="true" label-width="68px">
          <el-form-item label="">
            <el-select
              style="width: 220px"
              v-model="queryParams.playerId"
              filterable
              remote
              reserve-keyword
              placeholder="玩家Id"
              :remote-method="searchPlayer"
              :loading="playerSelectLoading"
              clearable >

              <el-option
                  v-for="item in playerOptions"
                  :key="item.playerId"
                  :label="item.playerId + ' ' + item.nickname"
                  :value="item.playerId">
                </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="时间范围">
            <el-date-picker
              v-model="dateRange"
              style="width: 240px"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQueryReport">筛选</el-button>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="resetRangeReport">重置</el-button>
          </el-form-item>
        </el-form>
        <el-table v-loading="rangeLoading" :data="rangeDataReport">
          <el-table-column
            label="总手数"
            align="center"
            prop="totalHands"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="总保险"
            align="center"
            prop="totalInsurancePool"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="总活跃度积分"
            align="center"
            prop="totalActivityPoints"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="总战绩"
            align="center"
            prop="totalScore"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="总JP贡献值"
            align="center"
            prop="totalJpContribution"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="总带入"
            align="center"
            prop="totalBuyIn"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="总战绩流水"
            align="center"
            prop="totalScoreDetails"
            :show-overflow-tooltip="true"
          />
        </el-table>
      </div>
    </div>
</template>
<script>

import { getDataReport, } from "@/api/data/report.js";
import { searchPlayerList} from "@/api/account/player.js";
export default {
  data() {
    return {
      queryParams: {
        playerId: undefined,
        dateRange: [],
      },
      loading: false,
      totalDataReport: [],

      playerSelectLoading:false,
      playerOptions:[],
      rangeLoading: false,
      dateRange: [],
      rangeDataReport: [],
      form: {
        totalHands: 0,
        totalInsurancePool: 0,
        totalActivityPoints: 0,
        totalScore: 0,
        totalJpContribution: 0,
        totalBuyIn: 0,
        totalScoreDetails: 0,
      },
      rules: {
      },
      options: [],
    };
  },
  mounted() {
    this.getDataReport();
  },
  methods: {
    // 查询数据列表
    getDataReport() {
      this.loading = true;
      getDataReport(this.queryParams).then((res) => {
        this.totalDataReport = [res.report]
        this.loading = false
      }).catch((error) => {
        // 处理接口异常
        console.error("getDataReport error:", error);
        this.loading = false;
      });
    },

    // query
    handleQueryReport() {
       let pId = this.queryParams.playerId

       if (pId <= 0 && (!this.dateRange[0] || this.dateRange[0] === undefined || !this.dateRange[1] || this.dateRange[1] === undefined)) {
         // 显示提示信息
         console.log("请输入过滤条件");
         this.rangeLoading = false;
         return;
       }

       let params={
           playerId:  this.queryParams.playerId,
           startDate: this.dateRange[0],
           endDate: this.dateRange[1],
       }

       console.log("handleQueryReport : ", this.dateRange[0] +"  " + this.dateRange[1])
       this.rangeLoading = true
       getDataReport(params).then((res) => {
           console.log("handleQueryReport result : ", res.report.totalHands)
           this.rangeDataReport = [res.report]
           this.rangeLoading = false
       }).catch((error) => {
           // 处理接口异常
           console.error("handleQueryReport error:", error);
           this.rangeLoading = false;
       });
    },

    // 模糊查询玩家
    searchPlayer(query) {
      if (query !== "") {
        this.playerSelectLoading = true;
        searchPlayerList({ key: query }).then((res) => {
          this.playerOptions = res.rows;
          this.playerSelectLoading = false;
        }).catch((error) => {
          this.playerSelectLoading = false;
          console.error("getBindRelations error:", error);
          this.playerSelectLoading = []
          });
      } else {
        this.playerOptions = [];
      }
    },

    // 重置表单
    resetRangeReport() {

      this.queryParams = {
         playerId: undefined,
         dateRange: [],
      },
      this.dateRange = [],
      this.rangeDataReport = [],
      this.rangeLoading = false;
    },
  },
};
</script>
<style lang="scss" scoped>
.search {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  .search-input {
    width: 240px;
  }
}
</style>
